<template>
	<view>
		<view class="bg-[#fff] rounded-[20rpx] p-[20rpx] mt-[20rpx]">
			<!-- 店名  -->
			<view class="flex justify-between items-center">
				<view class="flex items-center " >
					<image class="w-[31rpx] h-[29rpx] mt-[1rpx] " src="@/static/my/address/store.png"></image>
					<up-text margin="0 0 0 10rpx" color="#000000" size="30rpx" :bold="true" :text="data.tradeName"></up-text>
					<view class="ml-[10rpx]">
						<!-- <u-icon top="0rpx" name="arrow-right"></u-icon> -->
					</view>
				</view>
				<view class="">
					<view class="flex items-center" v-if="data.show" @click="connections()">
						<image style="
					width: 35rpx; 
					height: 32rpx;
					margin-right: 0rpx;" src="@/static/my/address/address.png"></image>
					<view @click="gophone()" class="text-[28rpx]" >
						联系商家
					</view>
					</view>
					<u-tag  v-else :text="data.distributionMode" plain color="#FE861C" bgColor="#FFEBDA" borderColor="#FE861C"></u-tag>
				</view>
			</view>
			<u-line class="" margin="20rpx 0" color="#efefef"></u-line>
	<view class="mt-[20rpx]" v-if=" data.orderList?.length > 0">
			<u-read-more ref="uReadMore" textIndent="0" color="#6C6C6C "
				:closeText="'展开更多 ' + '(' + ' 共 '  + data.num+ ' 件 ' + ')'" openText="收起" showHeight="70"
				:toggle="true">
				<view class="" v-for="(item,index) in data.orderList" :key="index">
					<view class="flex items-center mb-[30rpx]">
						<view class=" flex">
							<image class="w-[76rpx] h-[76rpx] rounded-[10rpx]" :src="item.goodsImages"></image>
							<view class="w-[300rpx] ml-[20rpx] flex flex-col justify-between">
								<up-text color="#010101" size="14" :text="item.goodsName" lines="1"></up-text>
								<view class="flex">
									<view class="">
										<up-text color="#666666" size="13" :text="item.specification"
									lines="1">
									</up-text>
									</view>		
									<view  class="flex" v-for="(item,index) in item.batchingIds" :key="index">
										<view class="flex-none">
											<up-text color="#666666" size="13" :text="item.batchingName"
											lines="1">
											</up-text>
										</view>
										
									</view>
								</view>
								
							</view>
						</view> 
						<view class="flex-1 flex justify-end">
							<view class="flex-1 text-right text-[#171717] text-[26rpx]">
								x{{item.singleorderNum}}
							</view>
							<view class="flex-1 text-right text-[#171717] text-[26rpx]">
								￥{{item.subtotalPrice}}
							</view>
						</view>
					</view>
				</view>
			</u-read-more>
	
			<!-- 打包 配送费 -->
			<view class="mt-[30rpx] text-[#010101] text-[28rpx]">
				<view class="flex justify-between">
					<view class="">
						打包费
					</view>
					<view class="">
						{{data.balingCharge}}
						<!-- ￥{{cartList.packagePrice}} -->
					</view>
				</view>
				<view class="flex justify-between mt-[30rpx]">
					<view class="">
						配送费
					</view>
					<view class="">
						￥{{NP.plus(data.deliveryFee,data.servicePrice)}}
						<!-- ￥{{NP.plus(cartList.deliveryFee,cartList.servicePrice)}} -->
					</view>
				</view>
				<u-line margin="20rpx 0" color="#efefef"></u-line>
				<view class="text-right text-[#FB2A2A] text-[30rpx] font-bold">
					￥{{data.totalPrice}}
				</view>
			</view>
	
		</view>
	</view>	
	</view>
</template>

<script setup>
	import NP from 'number-precision'
	const porps = defineProps({
		data:{
			type: Object
		}
	})
	const emits = defineEmits([
		"connections",
		"goStore",
		"gophone"
	]);
	const connections = () => {
		emits('connections')
		
	}
	const gophone = () => {
		emits('gophone')
	}
	
	const goStore =()=>{
		emits('goStore')
	}
	console.log("data",porps);
</script>

<style>

</style>
